{% extends 'base.html' %}
{% block title %}
    论坛
{% endblock %}
{% block link %}
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/detail.css') }}">
    {#    <link href="https://unpkg.com/prismjs@latest/themes/prism.css" rel="stylesheet">#}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/editer.css') }}">



    <meta name="viewport" content="width=device-width, initial-scale=1"/>
{% endblock %}

{% block content %}

    <!-- 文章分类 -->
    <div class="container father">
        <div class="row">
            <div class="col-sm-9 col-12">
                <div class="col-12" style="background-color: hsla(0, 100%, 100%, 0.5);;padding: 20px; border-radius: 10px;
    border: 1px solid #cccccc;">
                    <h3 class="page-title">{{ question.title }}</h3>

                    {% if not is_favorite %}
                        <span style="margin-left: 750px;cursor: pointer;" class="favorite">收藏文章</span>
                    {% else %}
                        <span style="margin-left: 750px;cursor: pointer;" class="cancel_favorite">取消收藏</span>

                    {% endif %}


                    <p class="question-info">
                        <span>作者：{{ question.author.username }}</span>
                        <span>类别：{{ question.category.name }}</span>
                        <span>时间：{{ question.create_time|date }}</span>
                        <span>阅读：{{ question.readcount }}</span>
                        <span>积分：{{ question.credit }}</span>
                    </p>
                    <hr>
                    <div class="question-content editor-content-view">
                        {{ content|safe }}
                        <div class="appended-content"></div>
                    </div>
                    {% if not user_credit %}
                    {% elif not user %}
                        <div class="col-12 readall">
                            <button class="col-sm-10 col-12">
                                <span class="oi oi-data-transfer-download"
                                      aria-hidden="true">请先登录：<a href="/user/login"
                                                                     style="color: orangered">点击登录</a></span>

                            </button>
                        </div>
                    {% else %}
                        <div class="col-12 readall">
                            <button class="col-sm-10 col-12 readAll-button">
                                <span class="oi oi-data-transfer-download"
                                      aria-hidden="true">点击预览消耗积分：{{ question.credit }}</span>

                            </button>
                        </div>

                    {% endif %}


                    <div class="comment-bottom">
                        <hr>

                        <div class="next-article">
                            <span>版权所有，转载本站文章请注明出处：逐梦之家: https://www.zmdl.top</span>
                            <br>
                            <span><a href="/detail/{{ dic.pre_id }}">上一篇: {{ dic.pre_title }}</a></span>
                            <br>
                            <span><a href="/detail/{{ dic.beh_id }}">下一篇: {{ dic.beh_title }}</a></span>
                        </div>
                        <hr>
                        <h4 class="comment-group-title">评论（{{ question.boke_answer|length }}）：</h4>
                        <form action="" method="post">
                            <div class="form-group">
                                <input type="text" placeholder="请填写评论" class="form-control content-comment">
                            </div>
                            <div class="form-group" style="text-align: right;">
                                <button class="btn btn-primary post-comment">评论</button>
                            </div>
                        </form>
                    </div>


                    <hr>

                    <!--评论-->
                    <ul class="comment-group">
                        {% for comment in comment_list %}
                            <!--父评论-->
                            <li>
                                <div class="user-info2">
                                    <img class="avatar"
                                         src="{{ url_for('static', filename='photo/' + comment[0].author.photo) }}"
                                         alt="">
                                    <span class="username">{{ comment[0].author.username }}</span>
                                    <span class="create-time">{{ comment[0].create_time }}</span>
                                    <p></p>
                                    <a class="create-time user_replay" data-question-id= {{ comment[0].id }}>回复</a>
                                    {#                                    <a class="create-time">点踩</a>#}
                                    {#                                    <a class="create-time">点赞</a>#}

                                </div>
                                <p class="comment-content">{{ comment[0].content }}</p>
                            </li>

                            <!--回复-->
                            <div class="replay" style="display: none" data-question-id= {{ comment[0].id }}>
                                <input id="replay-content" data-comment-id="{{ comment[0].id }}" type="text"
                                       placeholder="回复 {{ comment[0].author.username }}：" name="content"
                                       class="form-control "
                                       style="width: 810px;margin-left: 90px;">
                                <span class="c_replay"><button class="btn btn-success replay-msg"
                                                               data-comment-id="{{ comment[0].id }}"
                                                               data-article-id="{{ question.id }}">回复</button></span>
                            </div>

                            {% for comman in comment[1:] %}
                                <!--子评论-->
                                <li>
                                    <div class="replay_info">
                                        <img class="avatar"
                                             src="{{ url_for('static', filename='photo/' + comman.author.photo) }}"
                                             alt="">
                                        <span class="username">{{ comman.author.username }}</span>
                                        <span class="create-time">{{ comman.create_time }}</span>
                                        <p></p>
                                        {#                                    <span class="create-time">回复</span>#}
                                        {#                                        <span class="create-time">点踩</span>#}
                                        {#                                        <span class="create-time">点赞</span>#}

                                    </div>
                                    <p class="replay_content">{{ comman.content }}</p>

                                </li>

                            {% endfor %}




                        {% endfor %}
                    </ul>

                    <!--翻页-->
                    <div class="col-12 paginate">
                        {% if page==1 %}
                            <a href="/comment_page/{{ question.id }}-1"><span>上一页</span></a>
                        {% else %}
                            <a href="/comment_page/{{ question.id }}-{{ page-1 }}"><span>上一页</span></a>
                        {% endif %}

                        {% for i in range(total) %}
                            <a href="/comment_page/{{ question.id }}-{{ i + 1 }}"><span>{{ i + 1 }}</span></a>

                        {% endfor %}
                        {% if page ==total %}
                            <a href="/comment_page/{{ question.id }}-{{ total }}"><span>下一页</span></a>
                        {% else %}
                            <a href="/comment_page/{{ question.id }}-{{ page + 1 }}"><span>下一页</span></a>

                        {% endif %}


                    </div>

                </div>


            </div>


            <!-- 侧边栏 -->
            {% include 'side.html' ignore missing %}

        </div>
    </div>



{% endblock %}

{% block bottom %}
    <script src="https://unpkg.com/prismjs@latest/prism.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/prismjs@latest/components/prism-core.min.js"></script> -->
    <script src="https://unpkg.com/prismjs@latest/components/prism-core.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/prismjs@latest/plugins/autoloader/prism-autoloader.min.js"></script> -->
    <script src="https://unpkg.com/prismjs@latest/plugins/autoloader/prism-autoloader.js"></script>
    <script src="/static/js/article/detail.js"></script>
    <script src="/static/js/article/blog.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>

    <script>
        const article_id = {{ question.id }};
        const position = {{ position }};











    </script>

{% endblock %}

